﻿

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<title>青鸟租房 -发布房屋信息</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<!--<script type="text/javascript" src="js/function.js"></script>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/add.js"></script>-->
	<!-- 引入样式 -->

	<script src="js/vue.min.js"></script>
	<script src="js/axios.min.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<style>
		#regLogin>.dialog{
			width: 680px;
		}
		tr>td:nth-child(2){
			width: 260px;
		}
	</style>
	<style>
		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
		.avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		}
		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 178px;
			height: 178px;
			line-height: 178px;
			text-align: center;
		}
		.avatar {
			width: 178px;
			height: 178px;
			display: block;
		}
	</style>
</head>
<body>
<div id="app">
	<div id="header" class="wrap">
		<div id="logo">
			<img src="images/logo.gif" />
		</div>

	</div>
	<div id="regLogin" class="wrap">
		<div class="dialog">
			<dl class="clearfix">
				<dd class="past">填写房屋信息</dd>
			</dl>
			<div class="box">
				<form id="House_add_action" name="House_add_action" action="page/House_add.action" method="post">
					<div class="infos">
						<table class="field">
							<tr>
								<td class="field">标 题：</td>
								<td><input v-model="house.title" type="text" name="title" value="" id="House_add_action_title" class="text"/>
								<div style="color: red">{{error.title}}</div>
								</td>
							</tr>

							<tr>
								<td class="field">户 型：</td>
								<td><select class="text" v-model="house.tid" name="type.id" id="houseType"><!-- <option value="1000">一室一厅</option> -->
								<option v-for="t in types" :value="t.id">{{t.name}}</option>
								</select>
									<div style="color: red">{{error.tid}}</div>
								</td>
							</tr>

							<tr>
								<td class="field">面 积：</td>
								<td><input v-model="house.floorage" type="text" name="floorage" value="" id="House_add_action_floorage" class="text"/>
									<div style="color: red">{{error.floorage}}</div>
								</td>
							</tr>
							<tr>
								<td class="field">价 格：</td>
								<td><input v-model="house.price" type="text" name="price" value="" id="House_add_action_price" class="text"/>
									<div style="color: red">{{error.price}}</div>
								</td>
							</tr>

							<tr>
								<td class="field">房产证日期：</td>
								<td><input v-model="house.pubdate" type="date" class="text" name="pubDate" /></td>
							</tr>

							<tr>
								<td class="field">位 置：</td>
								<td>区：<select class="text" v-model="house.did" name="district.id" id="houseDistrict" @change="changeStreets">
									<option v-for="t in districts" :value="t.id">{{t.name}}</option>
								</select>
									街：<select v-model="house.sid" class="text" name="street.id" id="houseStreet">
										<option v-for="t in streets" :value="t.id">{{t.name}}</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="field">联系方式：</td>
								<td><input v-model="house.contact" type="text" name="contact" value="" id="House_add_action_contact" class="text"/>
									<div style="color: red">{{error.contact}}</div>
								</td>
							</tr>

							<tr>
								<td class="field">图片：</td>
								<td><input v-model="house.imgs" type="text" name="contact" value="" class="text"/></td>
								<td rowspan="2">
									<el-upload
											class="avatar-uploader"
											action="/upload"
											:show-file-list="false"
											:on-success="handleAvatarSuccess"
											:before-upload="beforeAvatarUpload">
										<img v-if="house.imgs" :src="house.imgs" class="avatar">
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
								</td>
							</tr>

							<tr>
								<td class="field">详细信息：</td>
								<td><textarea name="house.intro"></textarea></td>
							</tr>
						</table>
						<div class="buttons">
							<input @click.prevent="save" type="submit" id="House_add_action_0" value="立即发布"/>

						</div>
					</div>
				</form>




			</div>
		</div>
	</div>
	<div id="footer" class="wrap">
		<dl>
			<dt>青鸟租房 &copy; 2015 源辰信息科技有限公司 湘ICP证1000001号</dt>
			<dd>关于我们 · 联系方式 · 意见反馈 · 帮助中心</dd>
		</dl>
	</div>
</div>

<script>
	var v =new Vue({
		el:'#app',
		data:{
			types:[],
			districts:[],
			streets:[],
			house:{uid:1},
			error:{}
		},
		methods:{
			changeStreets(){
				axios.get("/yc112plyqnzf/street/queryByDid?did="+this.house.did).then(res=>this.streets=res.data);
			},
			save(){
				let p =new URLSearchParams();
				for(const name in this.house){
					p.append(name,this.house[name]);
				}
				axios.post("/yc112plyqnzf/house/save",p).then(res=>{
					this.error={};
					if(res.data.code==0){
						for (let e of res.data.data) {
							this.error[e.field]=e.defaultMessage
						}
						this.$alert(res.data.msg);
					}else{
						this.$message(res.data.msg)
					}

				})
			},
			handleAvatarSuccess(res, file) {
				this.house.imgs=res.data;
				this.$forceUpdate();
			},
			beforeAvatarUpload(file) {
				const isImage = file.type.indexOf("image/")==0;
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isImage) {
					this.$message.error('必须上传图片格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isImage && isLt2M;
			}
		},
		created(){


			axios.get("/yc112plyqnzf/type/queryAll").then(res=>this.types=res.data);

			axios.get("yc112plyqnzf/district/queryAll").then(res=>this.districts=res.data);

			if(location.search){
				axios.get("yc112plyqnzf/house/queryById"+location.search).then(res=>this.house=res.data);
			}
		}
	})
</script>

</body>
</html>